<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Floated Box</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
    <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
    <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
</head>

<body>

    <h1>Floated Box</h1>

    <div class="container">
    <div class="default def_before"   >BEFORE</div>
    <div class="float_box box_1 small" >FLOAT #1</div>

    <div class="float_box box_2"       >&uarr; <br /> Top <br /> &larr; Left &nbsp; &nbsp;
                           &nbsp; Right &rarr; <br /> Bottom <br /> &darr; </div>

    <div class="float_box box_3 small" >FLOAT #3</div>
    <div class="default def_after"   >AFTER</div>
    <div class="default def_after"   >what about this?</div>
        <div class="default def_after"   >and this? I see!!! It simply allows text to flow around it, nothing more!
            Where does this text goes after it exceeds float #3? Does it wrap below float #2? It most certainly does.
        </div>
    </div>

</body>
</html>
